<template>
  <div class="border">
    <div>
      <div class="index_head">
        <van-image
          v-if="id === ''"
          @click="jumpLogin()"
          class="index_touxiang"
          round
          width="3rem"
          height="3rem"
          src=""
        />
        <van-image
          v-else
          @click="jumpTouxiangDetail()"
          class="index_touxiang"
          round
          width="3rem"
          height="3rem"
          :src="url"
        />
        <van-search
         @focus="jumpSouSuo()"
          class="index_search"
          shape="round"
          background="#6c90f3"
          v-model="value"
          placeholder="请输入搜索关键词"
        />
        <van-icon
          class="index_soft"
          name="send-gift-o"
          size="30"
          color="whitesmoke"
        />
        <van-icon
          v-if="id === ''"
          @click="jumpLogin()"
          class="index_chat"
          name="chat-o"
          size="30"
          color="whitesmoke"
        />
        <van-icon
          v-else
          @click="jumpNotice()"
          class="index_chat"
          name="chat-o"
          size="30"
          color="whitesmoke"
        />
      </div>
      <div>
        <van-tabs
          background="#6c90f3"
          title-inactive-color="white"
          class="index_tab"
          v-model="active"
          @click="onClick"
          sticky
        >
          <van-tab title="精选" title-style="font-size:20px">
            <br />
            <van-button
              class="heart_small"
              size="mini"
              round
              type="info"
              @click="jumpSoftKind()"
              >应用分类</van-button
            >
            <van-button
              class="heart_small"
              size="mini"
              round
              type="info"
              @click="jumpGameKind()"
              >游戏分类</van-button
            >
            <van-button
              class="heart_small"
              size="mini"
              round
              type="info"
              @click="jumpToday()"
              >今日更新</van-button
            >
            <van-button
              class="heart_small"
              size="mini"
              round
              type="info"
              @click="jumpGoodSoft()"
              >好软推荐</van-button
            >
            <br />
            <br />
            <div class="heart_banner">
              <img class="banner_img" src="static/images/1.jpg" alt="" />
              <div class="banner_div">
                <div
                  @click.stop="jumpDetail(item, index)"
                  class="banner_show"
                >
                  <van-image
                    radius="10"
                    class="guess_like_img"
                    width="50"
                    height="50"
                    src="static/images/1.jpg"
                  />
                  <span class="banner_sp1">三国志</span>
                  <span class="banner_sp2">下载次数：1w</span>
                  <van-button
                    @click.stop="downloadButton()"
                    class="banner_small"
                    size="small"
                    round
                    type="info"
                    >下载</van-button
                  >
                </div>
              </div>
            </div>
            <br />
            <!-- 猜你喜欢 -->
            <div class="guess_like" @click="jumpGuessLike()">
              <div class="guess_text">
                <span class="guess_text_sp1">猜你喜欢</span>
                <van-icon class="guess_arrow" name="arrow" />
              </div>
              <br />
              <br />
              <div
                @click.stop="jumpDetail(item, index)"
                class="guess_like_show"
                v-for="(item, index) in likeList.slice(0, 3)"
                :key="index"
              >
                <van-image
                  radius="10"
                  class="guess_like_img"
                  width="50"
                  height="50"
                  :src="item.app_image_road"
                />
                <span class="guess_like_sp1">{{ item.app_name }}</span>
                <span class="guess_like_sp2"
                  >下载次数：{{ item.app_downloding_times }}</span
                >
                <van-button
                  @click.stop="downloadButton(item, index)"
                  class="guess_like_small"
                  size="small"
                  round
                  type="info"
                  >下载</van-button
                >
              </div>
            </div>
            <br />
            <!-- 热门应用 -->
            <div class="guess_like" @click="jumpHotSoft()">
              <div class="guess_text">
                <span class="guess_text_sp1">热门应用</span>
                <van-icon class="guess_arrow" name="arrow" />
              </div>
              <br />
              <br />
              <div
                @click.stop="jumpDetail(item1, index1)"
                class="guess_like_show"
                v-for="(item1, index1) in hotList.slice(0, 4)"
                :key="index1"
              >
                <van-image
                  radius="10"
                  class="guess_like_img"
                  width="50"
                  height="50"
                  :src="item1.app_image_road"
                />
                <span class="guess_like_sp1">{{ item1.app_name }}</span>
                <span class="guess_like_sp2"
                  >下载次数：{{ item1.app_downloding_times }}</span
                >
                <van-button
                  @click.stop="downloadButton(item1, index1)"
                  class="guess_like_small"
                  size="small"
                  round
                  type="info"
                  >下载</van-button
                >
              </div>
            </div>
            <br />
            <br />
            <!-- 好软畅玩 -->
            <div class="guess_like" @click="jumpFriendPlay()">
              <div class="guess_text">
                <span class="guess_text_sp1">好软畅玩</span>
                <van-icon class="guess_arrow" name="arrow" />
              </div>
              <br />
              <br />
              <div
                @click.stop="jumpDetail(item1, index1)"
                class="guess_like_show"
                v-for="(item1, index1) in playList"
                :key="index1"
              >
                <van-image
                  radius="10"
                  class="guess_like_img"
                  width="50"
                  height="50"
                  :src="item1.app_image_road"
                />
                <span class="guess_like_sp1">{{ item1.app_name }}</span>
                <span class="guess_like_sp2"
                  >下载次数：{{ item1.app_downloding_times }}</span
                >
                <van-button
                  @click.stop="downloadButton(item1, index1)"
                  class="guess_like_small"
                  size="small"
                  round
                  type="info"
                  >下载</van-button
                >
              </div>
            </div>
            <div class="foot"></div>
          </van-tab>
          <van-tab title="应用" title-style="font-size:20px">
            <!-- 好软推荐 -->
            <br />
            <div>
              <div class="guess_like" @click="jumpSoftRecommend()">
                <div class="guess_text">
                  <span class="guess_text_sp1">好软推荐</span>
                  <van-icon class="guess_arrow" name="arrow" />
                </div>
                <br />
                <br />
                <div
                  @click.stop="jumpDetail(item1, index1)"
                  class="good_soft_show"
                  v-for="(item1, index1) in list"
                  :key="index1"
                >
                  <van-image
                    radius="10"
                    class="good_soft_img"
                    width="70"
                    height="70"
                    :src="item1.app_image_road"
                  />
                  <p class="good_soft_p1">{{ item1.app_name }}</p>
                </div>
                <br /><br />
              </div>
            </div>
            <br /><br />
            <!-- 应用更新 -->
            <div class="guess_like" @click="jumpSoftUpdate()">
              <div class="guess_text">
                <span class="guess_text_sp1">应用更新</span>
                <van-icon class="guess_arrow" name="arrow" />
              </div>
              <br />
              <br />
              <div
                @click.stop="jumpDetail(item1, index1)"
                class="guess_like_show"
                v-for="(item1, index1) in updateList"
                :key="index1"
              >
                <van-image
                  radius="10"
                  class="guess_like_img"
                  width="50"
                  height="50"
                  :src="item1.app_image_road"
                />
                <span class="guess_like_sp1">{{ item1.app_name }}</span>
                <span class="guess_like_sp2"
                  >下载次数：{{ item1.app_downloding_times }}</span
                >
                <van-button
                  @click.stop="downloadButton(item1, index1)"
                  class="guess_like_small"
                  size="small"
                  round
                  type="info"
                  >下载</van-button
                >
              </div>
            </div>
          </van-tab>
          <van-tab title="游戏" title-style="font-size:20px">
            <br />
            <div>
              <div class="guess_like">
                <div class="guess_text">
                  <span class="guess_text_sp1">酷友都在玩</span>
                </div>
                <br />
                <br />
                <div
                  @click.stop="jumpDetail(item1, index1)"
                  class="good_soft_show"
                  v-for="(item1, index1) in kuList"
                  :key="index1"
                >
                  <van-image
                    radius="10"
                    class="good_soft_img"
                    width="70"
                    height="70"
                    :src="item1.app_image_road"
                  />
                  <p class="good_soft_p1">{{ item1.app_name }}</p>
                </div>
                <br /><br />
              </div>
            </div>
            <br /><br />
            <!-- 游戏更新 -->
            <div class="guess_like" @click="jumpGameUpdate()">
              <div class="guess_text">
                <span class="guess_text_sp1">游戏更新</span>
                <van-icon class="guess_arrow" name="arrow" />
              </div>
              <br />
              <br />
              <div
                @click.stop="jumpDetail(item1, index1)"
                class="guess_like_show"
                v-for="(item1, index1) in gameList"
                :key="index1"
              >
                <van-image
                  radius="10"
                  class="guess_like_img"
                  width="50"
                  height="50"
                  :src="item1.app_image_road"
                />
                <span class="guess_like_sp1">{{ item1.app_name }}</span>
                <span class="guess_like_sp2"
                  >下载次数：{{ item1.app_downloding_times }}</span
                >
                <van-button
                  @click.stop="downloadButton(item1, index1)"
                  class="guess_like_small"
                  size="small"
                  round
                  type="info"
                  >下载</van-button
                >
              </div>
            </div>
            <div class="foot"></div>
          </van-tab>
          <van-tab title="排行" title-style="font-size:20px">
            <br />
            <div class="van_button">
              <van-button
                class="heart_small"
                @click="softBang()"
                round
                type="info"
                >应用榜</van-button
              >
              <van-button
                class="heart_small"
                @click="gameBang()"
                round
                type="info"
                >游戏榜</van-button
              >
              <van-button
                class="heart_small"
                @click="talkBang()"
                round
                type="info"
                >讨论榜</van-button
              >
              <van-button
                class="heart_small"
                @click="scoreBang()"
                round
                type="info"
                >评分榜</van-button
              >
            </div>
            <br />
            <br />
            <div v-show="show1">
              <div class="gametop">
                <img src="static/img/app2.jpg" class="game" @click="top2()" />
                <img src="static/img/app1.jpg" class="game" @click="top1()" />
                <img src="static/img/app3.jpg" class="game" @click="top3()" />
              </div>
              <br />
              <br />
              <div class="guess_like" @click="jumpGameUpdate()">
                <br />
                <div
                  @click.stop="jumpDetail(item1, index1)"
                  class="guess_like_show"
                  v-for="(item1, index1) in softBangList"
                  :key="index1"
                >
                  <van-image
                    radius="10"
                    class="guess_like_img"
                    width="50"
                    height="50"
                    :src="item1.app_image_road"
                  />
                  <span class="guess_like_sp1">{{ item1.app_name }}</span>
                  <span class="guess_like_sp2"
                    >下载次数：{{ item1.app_downloding_times }}</span
                  >
                  <van-button
                    @click.stop="downloadButton(item1, index1)"
                    class="guess_like_small"
                    size="small"
                    round
                    type="info"
                    >下载</van-button
                  >
                </div>
              </div>
            </div>
            <div v-show="show2">
              <div class="gametop">
                <img src="static/img/game2.jpg" class="game" @click="top2()" />
                <img src="static/img/game1.jpg" class="game" @click="top1()" />
                <img src="static/img/game3.jpg" class="game" @click="top3()" />
              </div>
              <br />
              <br />
              <div class="guess_like" @click="jumpGameUpdate()">
                <br />
                <div
                  @click.stop="jumpDetail(item1, index1)"
                  class="guess_like_show"
                  v-for="(item1, index1) in gameBangList"
                  :key="index1"
                >
                  <van-image
                    radius="10"
                    class="guess_like_img"
                    width="50"
                    height="50"
                    :src="item1.app_image_road"
                  />
                  <span class="guess_like_sp1">{{ item1.app_name }}</span>
                  <span class="guess_like_sp2"
                    >下载次数：{{ item1.app_downloding_times }}</span
                  >
                  <van-button
                    @click.stop="downloadButton(item1, index1)"
                    class="guess_like_small"
                    size="small"
                    round
                    type="info"
                    >下载</van-button
                  >
                </div>
              </div>
            </div>
            <div v-show="show3">
              <div class="gametop">
                <img
                  src="static/img/discuss2.jpg"
                  class="game"
                  @click="top2()"
                />
                <img
                  src="static/img/discuss1.jpg"
                  class="game"
                  @click="top1()"
                />
                <img
                  src="static/img/discuss3.jpg"
                  class="game"
                  @click="top3()"
                />
              </div>
              <br />
              <br />
              <div class="guess_like" @click="jumpGameUpdate()">
                <br />
                <div
                  @click.stop="jumpDetail(item1, index1)"
                  class="guess_like_show"
                  v-for="(item1, index1) in talkBangList"
                  :key="index1"
                >
                  <van-image
                    radius="10"
                    class="guess_like_img"
                    width="50"
                    height="50"
                    :src="item1.app_image_road"
                  />
                  <span class="guess_like_sp1">{{ item1.app_name }}</span>
                  <span class="guess_like_sp2"
                    >下载次数：{{ item1.app_downloding_times }}</span
                  >
                  <van-button
                    @click.stop="downloadButton(item1, index1)"
                    class="guess_like_small"
                    size="small"
                    round
                    type="info"
                    >下载</van-button
                  >
                </div>
              </div>
            </div>
            <div v-show="show4">
              <div class="gametop">
                <img src="static/img/point2.jpg" class="game" @click="top2()" />
                <img src="static/img/point1.jpg" class="game" @click="top1()" />
                <img src="static/img/point3.jpg" class="game" @click="top3()" />
              </div>
              <br />
              <br />
              <div class="guess_like" @click="jumpGameUpdate()">
                <br />
                <div
                  @click.stop="jumpDetail(item1, index1)"
                  class="guess_like_show"
                  v-for="(item1, index1) in scoreBangList"
                  :key="index1"
                >
                  <van-image
                    radius="10"
                    class="guess_like_img"
                    width="50"
                    height="50"
                    :src="item1.app_image_road"
                  />
                  <span class="guess_like_sp1">{{ item1.app_name }}</span>
                  <span class="guess_like_sp2"
                    >下载次数：{{ item1.app_downloding_times }}</span
                  >
                  <van-button
                    @click.stop="downloadButton(item1, index1)"
                    class="guess_like_small"
                    size="small"
                    round
                    type="info"
                    >下载</van-button
                  >
                </div>
              </div>
            </div>
            <div class="foot"></div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import http from '../api/index';
export default {
  data() {
    return {
      value: '',
      active: 0,
      careList: [],
      likeList: [],
      hotList: [],
      playList: [],
      list: [],
      kuList: [],
      gameList: [],
      updateList: [],
      softBangList: [],
      gameBangList: [],
      talkBangList: [],
      scoreBangList: [],
      type1: 'default',
      type2: 'info',
      id1: 1,
      id2: 2,
      show1: true,
      show2: false,
      show3: false,
      show4: false,
      id: sessionStorage.getItem('roleId'),
      url: sessionStorage.getItem('src'),
    };
  },
  mounted() {
    // 评分榜
    http
      .getScore({
        pages: 1,
      })
      .then((r) => {
        console.log(r);
        this.scoreBangList = r.data;
      });
    // 讨论榜
    http
      .getTalking({
        pages: 1,
      })
      .then((r) => {
        console.log(r);
        this.talkBangList = r.data;
      });
    // 游戏榜
    http
      .getSoftRize({
        pages: 1,
        app_father_type_id: 2,
      })
      .then((r) => {
        console.log(r);
        this.gameBangList = r.data;
      });
    // 应用榜
    http
      .getSoftRize({
        pages: 1,
        app_father_type_id: 1,
      })
      .then((r) => {
        console.log(r);
        this.softBangList = r.data;
      });
    // 游戏更新
    http
      .getSoftUpdata({
        pages: 1,
        app_father_type_id: 2,
      })
      .then((r) => {
        console.log(r);
        this.gameList = r.data;
      });
    // 酷友都在玩
    http
      .getGoodSoft({
        pages: 1,
        app_father_type_id: 2,
      })
      .then((r) => {
        console.log(r);
        this.kuList = r.data;
      });
    // 猜你喜欢
    http
      .getLikeSoft({
        user_id: 1,
      })
      .then((r) => {
        console.log(r);
        this.likeList = r.data;
      });
    // 热门应用
    http.getHotSoft().then((r) => {
      console.log(r);
      this.hotList = r.data;
    });
    // 好软畅玩
    http.friendPlay().then((r) => {
      console.log(r);
      this.playList = r.data;
    });
    // 好软推荐
    http
      .getGoodSoft({
        pages: 1,
        app_father_type_id: 1,
      })
      .then((r) => {
        console.log(r);
        this.list = r.data;
      });
    // 应用更新
    http
      .getSoftUpdata({
        pages: 1,
        app_father_type_id: 1,
      })
      .then((r) => {
        console.log(r);
        this.updateList = r.data;
      });
  },
  methods: {
    // 搜索
    jumpSouSuo(){
      this.$router.push('/sousuo');

    },
    // 通知
    jumpNotice() {
      this.$router.push('/notice');
    },
    jumpLogin() {
      this.$router.push('/login');
    },
    // 跳到用户信息
    jumpTouxiangDetail() {
      this.$router.push('/detail');
    },
    // 下载
    downloadButton(item, index) {
      window.location.href =
        'http://whole555.oss-cn-beijing.aliyuncs.com/whole/2020/10/15/16027471177286380.apk';
      http.downloadTimes({
        app_id:item.app_id
      }).then(r => {
        console.log(r);
        item.app_downloding_times=r.data;
      })
    },
    //
    softBang() {
      this.show2 = false;
      this.show3 = false;
      this.show4 = false;
      this.show1 = true;
    },
    gameBang() {
      this.show1 = false;
      this.show3 = false;
      this.show4 = false;
      this.show2 = true;
      this.type2 = 'info';
    },
    talkBang() {
      this.show1 = false;
      this.show2 = false;
      this.show4 = false;
      this.type2 = 'info';
      this.show3 = true;
    },
    scoreBang() {
      this.show1 = false;
      this.show2 = false;
      this.show3 = false;
      this.type2 = 'info';
      this.show4 = true;
    },
    // 跳到详情
    jumpDetail(item, index) {
      this.$router.push('/softDetails/' + item.app_id);
    },
    // 应用分类
    jumpSoftKind() {
      this.$router.push('/gameKind/' + this.id1);
    },
    // 游戏分类
    jumpGameKind() {
      this.$router.push('/gameKind/' + this.id2);
    },
    // 游戏更新
    jumpGameUpdate() {
      this.$router.push('/gameUpdate');
    },
    // 应用更新
    jumpSoftUpdate() {
      this.$router.push('/softUpdate');
    },
    // 好软应用推荐
    jumpSoftRecommend() {
      this.$router.push('/softRecommend');
    },
    // 今日更新
    jumpToday() {
      this.$router.push('/todayUpdate');
    },
    // 好软推荐
    jumpGoodSoft() {
      this.$router.push('/goodSoftRecommend');
    },
    // 好软畅玩
    jumpFriendPlay() {
      this.$router.push('/friendPlay');
    },
    // 跳到猜你喜欢
    jumpGuessLike() {
      this.$router.push('/guessLike');
    },
    // 跳到热门应用
    jumpHotSoft() {
      this.$router.push('/hotSoft');
    },
    onClick(name, title) {
      console.log(name);
      console.log(title);
      if (name === 0) {
        // http.userCare().then((r) => {
        //   console.log(r);
        //   this.careList = r.data;
        // });
      }
    },
  },
};
</script>
<style scoped>
.banner_small{
  position: absolute;
  top: 0.8rem;
  left: 27.8rem;
  width: 7rem;
}
.banner_sp1 {
  position: absolute;
  top: 0.1rem;
  left: 7.5rem;
  font-size: 1.8rem;
  color: #252525;
  width: 8rem;
}
.banner_sp2 {
  position: absolute;
  top: 3.1rem;
  left: 7.5rem;
  font-size: 1.4rem;
  color: #7a7a7a;
  width: 12rem;
}
.banner_show{
  position: absolute;
  top: 0.5rem;
  left: 0;
}
.banner_div {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 6rem;
  background-color: white;
}
.banner_img {
  width: 100%;
  height: 18rem;
  border-radius: 1.5rem;
}
.game {
  width: 27%;
  height: 27%;
  margin-left: 1.7rem;
  margin-top: -1rem;
}
.border {
  background-color: #6c90f3;
  height: 9rem;
}
.index_head {
  width: 100%;
  height: 5.5rem;
  background-color: #6c90f3;
  position: sticky;
}
.index_touxiang {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.index_search {
  position: absolute;
  width: 26rem;
  left: 4.1rem;
}
.index_soft {
  position: absolute;
  top: 1.2rem;
  right: 4.4rem;
}
.index_chat {
  position: absolute;
  top: 1.2rem;
  right: 0.6rem;
}
.index_care {
  width: 100%;
  height: 20rem;
  background-color: white;
  border-radius: 1rem;
  margin-top: 2rem;
  position: relative;
}
.index_care_touxiang {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.heart_small {
  width: 23%;
  height: 4rem;
  font-size: 1.6rem;
}
.heart_banner {
  width: 96%;
  margin: 0 auto;
  height: 20rem;
  border-radius: 1.5rem;
  background-color: white;
  position: relative;
}
.guess_like {
  width: 96%;
  margin: 0 auto;
  border-radius: 1.5rem;
  background-color: white;
}
.guess_text {
  position: relative;
}
.guess_text_sp1 {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  font-size: 1.6rem;
}
.guess_arrow {
  position: absolute;
  right: 1rem;
  top: 1.3rem;
  font-size: 2rem;
}
.guess_like_show {
  width: 96%;
  height: 6rem;
  position: relative;
  margin-top: 2rem;
}
.guess_like_img {
  position: absolute;
  top: 0px;
  left: 2rem;
  border-radius: 1rem;
}
.guess_like_sp1 {
  position: absolute;
  top: 0.1rem;
  left: 8.5rem;
  font-size: 1.8rem;
  color: #252525;
}
.guess_like_sp2 {
  position: absolute;
  top: 3rem;
  left: 8.5rem;
  font-size: 1.4rem;
  color: #7a7a7a;
}
.guess_like_small {
  position: absolute;
  top: 0.8rem;
  right: 0px;
  width: 7rem;
}
.good_soft_show {
  display: inline-block;
  margin-top: 2rem;
  margin-left: 4.5rem;
}
.good_soft_img {
  display: inline-block;
}
.good_soft_p1 {
  font-size: 1.6rem;
  margin-left: -0.3rem;
  margin-top: 0.5rem;
}
.foot {
  width: 100%;
  height: 10rem;
}
.bang_box {
  margin-top: 3rem;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}
.bang_box1 {
  width: 29%;
  height: 15rem;
  border-radius: 1rem;
  background-color: blue;
  position: relative;
}
.bang_box2 {
  width: 29%;
  height: 17rem;
  border-radius: 1rem;
  position: relative;
  background-color: blue;
}
.bang_box3 {
  width: 29%;
  height: 14rem;
  border-radius: 1rem;
  position: relative;
  background-color: blue;
}
.bang_img {
  position: absolute;
  top: -3rem;
  left: 3rem;
}
.bang_text {
  text-align: center;
  font-size: 1.8rem;
  color: #252525;
  margin-top: 4rem;
}
.guess_like_bang {
  width: 96%;
  height: 6rem;
  position: relative;
  margin-top: 2rem;
  background-color: white;
}
.van_button {
  width: 100%;
  margin: 0 auto;
}
</style>